<template>
    <ve-ring
            :data="chartData"
            :judge-width="true"
            :settings='chartSettings'
            height="calc(100% - 4px)"
            :legend="legend"
    ></ve-ring>
</template>

<script>
    import api from '../../api'
    export default {
        name: "that-day-total",
        data () {
            this.chartSettings = {
                radius:['0','55%'],
                offsetY:'48%',
                label:{
                    formatter:'{c} / {d}%',
                    fontSize:16
                }
            }
            return {
                chartData: {
                    columns: ['服务类型', '数量'],
                    rows: [
                        { '服务类型': 'IVR', '数量': 0 },
                        { '服务类型': '客户呼入', '数量': 0 },
                        { '服务类型': '坐席呼出', '数量': 0 },
                        { '服务类型': '在线服务', '数量': 0 }
                    ]
                },

                legend: {
                    y: 'bottom',
                    textStyle:{
                        fontSize:16,
                        color:'#fff'
                    },
                    itemWidth :14
                }
            }
        },
        created(){
            this.refresh()
        },
        methods:{
            async refresh(){
                let chartData = await api.getRealTime();
                let chartData2 = await api.getRealTime2();
                try {
                    this.chartData.rows[0]['数量'] = parseInt(chartData[0].idxs[1].val)
                    this.chartData.rows[1]['数量'] = parseInt(chartData[0].idxs[0].val)
                    this.chartData.rows[2]['数量'] = parseInt(chartData[0].idxs[2].val)
                }catch (e) {
                    console.log('cmsService/indicators/realtime/vdn接口有问题')
                }
                try {
                    this.chartData.rows[3]['数量'] = parseInt(chartData2[0].idxs[0].val)
                }catch (e) {
                    console.log('cmsService/indicators/realtime/media接口有问题')
                }
            }
        }
    }
</script>

<style scoped>

</style>
